<template>
    <el-dialog :model-value="dialogVisible" :close-on-click-modal="true" :before-close="handleClose" :title="isAdd === 'add' || isAdd === 'addChild' ? '新增分类' : '修改分类'" append-to-body width="520px" custom-class="dialogClass">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="父节点名称">
                <el-input v-model="form.parentName" v-if="isAdd !== 'add'" :disabled='true' placeholder="请输入分类名称" />
                <el-cascader
                    v-else
                    :key="parentKey"
                    v-model="form.parentId"
                    placeholder="请选择父节点"
                    :props="parentProps"
                    filterable
                    clearable
                    popper-class="cascaderClass"
                   style="width:100%"
                />
            </el-form-item>
            <el-form-item label="分类名称" prop="dictName">
                <el-input v-model="form.dictName" placeholder="请输入分类名称" class="w100p"/>
            </el-form-item>
            <el-form-item label="分类编号" prop="dictCode">
                <el-input v-model="form.dictCode" placeholder="请输入分类编号" class="w100p"/>
            </el-form-item>
            <!-- <el-form-item label="分类类型" prop="dictType">
                <el-input v-model="form.dictType" placeholder="请选择分类类型" />
            </el-form-item> -->
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button :loading="loading" type="primary" @click="submit()">确定</el-button>
                 <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script  setup>
import api from '@/api/index'
// eslint-disable-next-line no-unused-vars
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    isAdd: {
        type: String,
        default: 'add'
    },
    formData: {
        type: Object,
        default: ()=>{}
    }
})

const parentProps = ref({
    lazy: true,
    checkStrictly: true,
    lazyLoad(node, resolve) {
        if (!node) {
            return false
        }
        const { level } = node
        //level代表当前点击选择哪一项，，比如0代表第一次进去加载数据，1是选择省后的操作
        if (level === 0) {
            const params = {
                pageNum: 1,
                pageSize: 100
            }
            api.dataMaintenance.getTreeDictsList(params).then((res)=>{
                resolve(
                    res.list.map((item) => {
                        return {
                            value: item.id,
                            label: item.dictName,
                            leaf: !item.hasChildren,  //因为省市区三项，所以第三次点击就不用在加载了，所以 >=2
                        }
                    })
                )
            })
        }else{
            api.dataMaintenance.getTreeDictsClid(node.value).then((res)=>{
                resolve(
                    res.map((item) => {
                        return {
                            value: item.id,
                            label: item.dictName,
                            leaf: !item.hasChildren,  //因为省市区三项，所以第三次点击就不用在加载了，所以 >=2
                        }
                    })
                )
            })
        }
    },
})

const loading = ref(false)
const emit = defineEmits(['on-submit', 'handleClose'])
const formRef = ref(null)
const form = ref({})
const parentKey = ref(new Date())

const validatesourceCode = (rule, value, callback) => {
    let reg = /^[a-zA-Z0-9]{1,50}$/
    if(!reg.test(value)){
        callback(new Error('26个英文字母和0-9的自然数，1~50个字符'))
    }else{
        callback()
    }
}
const rules = reactive({
    dictName: [
        {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
        }
    ],
    dictCode: [
        {
            required: true,
            message: '请输入分类编号',
            trigger: 'blur'
        },
        { validator: validatesourceCode, trigger: 'blur' }
    ]
})

const handleClose = () => {
    formRef.value.resetFields()
    emit('handleClose',false)
}

const submit = () => {
    if (!formRef) return
    formRef.value.validate(valid => {
        if (valid) {
            if(props.isAdd === 'add'){
                if(form.value.parentId){
                    const index = form.value.parentId.length
                    form.value.parentId = form.value.parentId[index - 1]
                }else{
                    form.value.parentId = null
                }
            }
            if(props.isAdd === 'addChild'){
                form.value.id = null
            }
            emit('on-submit', {...form.value})
            handleClose()
        } else {
            return false
        }
    })
}

watch(() => props.dialogVisible,(newVal) => {
    if(newVal === true){
        if(props.isAdd === "add"){
            form.value = {}
            parentKey.value = new Date()
        }else if(props.isAdd === "addChild"){
            form.value.parentId = props.formData.id
            form.value.parentName = props.formData.dictName
        }else{
            form.value = {...props.formData}
        }
    }
})
</script>

<style lang="scss" scoped>
.dialog-footer{
    text-align: right;
}
.cascaderClass{
    z-index: 99999 !important;
}
</style>
